<template>
  <div class="setMemberBgComponent" v-if="oItem">
    <radioComponent
      v-if="oItem.ename == 'bgColorSet'"
      :item="{
        title: oItem.title,
        value: oItem.value,
        options: oItem.options,
        ename: 'bgColorSet'
      }"
      :rightIndex="rightIndex"
      :catalogIndex="catalogIndex"
      :id="id"
      @updateParent="updateSingleRadioGroup"
    ></radioComponent>
    <div class="setBg" v-if="oItem.value == 'color' || oItem.value == 'img'">
      <colorComponent
        v-if="oItem.value == 'color'"
        :item="oItem.options[0].catalog[0]"
        :rightIndex="rightIndex"
        :catalogIndex="catalogIndex"
        :id="id"
        @updateParent="updateParentColor"
      ></colorComponent>
      <chooseImageComponent
        v-if="oItem.value == 'img'"
        :item="oItem.options[1].catalog[0]"
        :rightIndex="rightIndex"
        :catalogIndex="catalogIndex"
        :id="id"
        @updateParent="chooseBgImgAfterUpdateParent"
        :controlName="oItem.options[1].catalog[0].ename"
      ></chooseImageComponent>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
export default {
  name: "setMemberBgComponent",
  data() {
    return {
      oItem: null,
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
    };
  },
  props: ["item", "rightIndex", "catalogIndex", "id"],
  components: {
    radioComponent: () => import("../lone/radioComponent.vue"),
    colorComponent: () => import("../lone/colorComponent.vue"),
    chooseImageComponent: () => import("../lone/chooseImageComponent.vue"),
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
    });
    setTimeout(() => {
      this.needUpdate = true;
    }, 500);

  },
  methods: {
    init() {
      if (this.item) {
        this.oItem = null;
        this.$nextTick(() => {
          this.oItem = JSON.parse(JSON.stringify(this.item));
        });
      }
    },


    //bgColorSet, color or img
    updateSingleRadioGroup(param) {
      if(param){
        let params = JSON.parse(param);
        this.oItem.value = params.value;

         if (this.needUpdate) {
          let needUpdateMainChild = true;

          let row = new Object();
          row.value = params.value;
          row.ename = params.ename;
          row.rightIndex = this.rightIndex;
          row.catalogIndex = this.catalogIndex;
          row.ocIndex = this.ocIndex;
          row.needUpdateMainChild = needUpdateMainChild;
          row.needUpdateMain = false;

          if (params.value == "color") {
            //选中要设置背景颜色
            //把图片置空
            this.oItem.options[1].catalog[0].value = "";

            row.bgImg = "";

            //背景色恢复默认
            let defaultColor = this.oItem.options[0].catalog[0].default;
            this.oItem.options[0].catalog[0].value = defaultColor;

            row.bgColor = defaultColor;

          } else if (params.value == "img") {
            //选中要设置背景图片
            //把背景色置空
            let defaultColor = this.oItem.options[0].catalog[0].default;
            this.oItem.options[0].catalog[0].value = defaultColor;

            row.bgColor = "";

            //设置显示上一次选中的图片
            let defaultImgURL = this.oItem.options[1].catalog[0].default;
            this.oItem.options[1].catalog[0].value = defaultImgURL;

            row.bgImg = defaultImgURL;
          }
          this.$emit("updateParent", JSON.stringify(row));
        }
      }
    },

    //choose color after, update parent color
    updateParentColor(param) {
      let params = JSON.parse(param);
      this.oItem.options[0].catalog[0].value = params.value;
      if (this.needUpdate) {
        let needUpdateMainChild = true;
        let row = new Object();
        row.value = params.value;
        row.ename = "bgColor";
        row.rightIndex = this.rightIndex;
        row.catalogIndex = this.catalogIndex;
        row.ocIndex = this.ocIndex;
        row.needUpdateMainChild = needUpdateMainChild;
        row.needUpdateMain = false;
        this.$emit("updateParent", JSON.stringify(row));
      }
    },

    //choose bgImg after, update parent
    chooseBgImgAfterUpdateParent(param) {
      let params = JSON.parse(param);
      this.oItem.options[1].catalog[0].value = params.value;
      if (this.needUpdate) {
        let needUpdateMainChild = true;
        let row = new Object();
        row.value = params.value;
        row.ename = "bgImg";
        row.rightIndex = this.rightIndex;
        row.catalogIndex = this.catalogIndex;
        row.ocIndex = this.ocIndex;
        row.needUpdateMainChild = needUpdateMainChild;
        row.needUpdateMain = false;
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>

<style scoped lang="scss">
.setMemberBgComponent {
  .setBg {
    background-color: #e9edef;
    padding: 15px 0;
  }
}
</style>
